<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">蘑菇街</div></nav-bar>
    <tab-control
        class="tab-control"
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        ref="tabControl1"
        v-show="isTabFiexd">
    </tab-control>
    <scroll class="content"
            ref="scroll"
            :probe-type= "3"
            @scroll="contentScroll"
            :pull-up-load='true'
            @pullingUp="loadMore">
      <home-swiper :banners = "banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
      <recommend-view :recommends="recommends"></recommend-view>
      <feature-view></feature-view>
      <tab-control
          :titles="['流行', '新款', '精选']"
          @tabClick="tabClick"
          ref="tabControl2">
      </tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>

</template>

<script>

import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import featureView from "./childComps/featureView";

import TabControl from "components/content/tabControl/TabControl";
import NavBar from "components/common/navbar/NavBar";
import GoodsList from "components/content/goods/GoodsList";
import Scroll from "components/common/scroll/Scroll";

import {getHomeMultidata} from "network/home";
import {getHomeGoods} from "network/home";
import {itemListenerMixin,backTopMixin} from "components/common/mixin";


export default {
  name: "Home",
  components:{
    NavBar,
    HomeSwiper,
    RecommendView,
    featureView,
    TabControl,
    GoodsList,
    Scroll,
  },
  mixins:[itemListenerMixin,backTopMixin],
  data(){
    return {
      banners:[],
      recommends:[],
      goods:{
        'pop':{page:0,list:[]},
        'new':{page:0,list:[]},
        'sell':{page:0,list:[]},
      },
      currentType:"pop",  //默认pop
      taboffsetTop:0,
      isTabFiexd:false,
      saveY:0,
     }
  },
  created(){
    //请求多个数据
    this.getHomeMultidata()

    //请求商品数据
    this.getHomeGoods("pop")
    this.getHomeGoods("new")
    this.getHomeGoods("sell")

    //手动代码点击一次
    // this.tabClick(0)
  },
  mounted() {
    console.log('我是首页混入内容')
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list
    }
  },
  destroyed(){
    console.log('home destroyed')
  },
  activated(){

    this.$refs.scroll.refresh()
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    //滚动完最好进行一次刷新
    this.$refs.scroll.refresh()

  },
  deactivated() {
    //保存Y值
    this.saveY = this.$refs.scroll.getscrollY()

    //取消全局的监听
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods:{
    //事件监听相关
    tabClick(index){
      switch (index){
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';
      }
      this.$refs.tabControl1.current = index
      this.$refs.tabControl2.current = index
    },
    contentScroll(position){
      //判断backtop是否显现
      this.isShowBackTop = (-position.y) > 1000

      //觉得tabControl是否吸顶(position：fix)
      this.isTabFiexd = (-position.y) > this.taboffsetTop
    },
    loadMore(){
      this.getHomeGoods(this.currentType)
    },
    swiperImageLoad(){
      //获得tabControl的offsetTop
      // 所有的组件都有一个属性 $el:用户后去组件中的元素
      this.taboffsetTop = this.$refs.tabControl2.$el.offsetTop
    },

    //网络请求
    getHomeMultidata(){
      getHomeMultidata().then(res =>{
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    },
    getHomeGoods(type){
      const page  = this.goods[type] +1
      getHomeGoods(type,page).then(res =>{
        this.goods[type].list.push(...res.data.list)
        this.goods[type.page] +=1

        //完成上拉加载更多
        this.$refs.scroll.finishPullUp()

      })
    }
  }
}

</script>

<style scoped>
#home {
  /*padding-top: 44px;*/
  height: 100vh;
  position: relative;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;

  /*浏览器原生滚动时使用*/
  /*position: fixed;*/
  /*left: 0;*/
  /*right: 0;*/
  /*top: 0;*/
  /*z-index: 9;*/
}

.tab-control {
  position: sticky;
  top: 44px;
  z-index: 9;
}

.content {
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}




/*.content {*/
/*height: calc(100% - 93px);*/
/*overflow: hidden;*/
/*margin-top: 44px;*/
/*}*/
</style>

